<template>
    <div class="container" :style="execStyle">
        <el-tree :data="markDownDirData" :default-expand-all="true" :expand-on-click-node="false" @node-click="handleNodeClick"></el-tree>
    </div>
</template>

<script>
import {getCommonParamObj} from "@/utils/commonParamUtil";

export default {
    name: "MarkDownDirectoryComponent",
    props: ['propJson', 'commonParam'],
    methods: {
        handleNodeClick(data) {
            // 获取markDown的容器对象
            let markDownContainerElementObj = getCommonParamObj(this.commonParam, this.propJson.markDownVariable);
            let markDownContainerElement = markDownContainerElementObj.variableValue;
            // 设置容器的滚动位置
            let goToElement = markDownContainerElement.querySelector("#jumpId" + data.id);
            let scrollPosition = goToElement.offsetTop - 20;
            // 进行滚动
            markDownContainerElement.scrollTo({
                left: 0,
                top: scrollPosition,
                behavior: 'smooth'
            });
        }
    },
    computed: {
        markDownDirData() {
            if (this.propJson.editFlag) {
                return []
            }
            // 获取markDown容器对象
            let markDownContainerElementObj = getCommonParamObj(this.commonParam, this.propJson.markDownVariable);
            let markDownContainerElement = markDownContainerElementObj.variableValue;
            if (!markDownContainerElement) {
                return []
            }
            let contentChildrenList = markDownContainerElement.children;
            if (!contentChildrenList || contentChildrenList.length <= 0) {
                return []
            }
            let commonTreeList = [];
            let lastLevel = null;
            let currentObjList = commonTreeList;
            let preNodeObj = {};
            for (let i = 0; i < contentChildrenList.length; i++) {
                let header = contentChildrenList[i].localName;
                // 正则校验标签为h开头的数据
                if (/\b[h][0-9]\b/.test(header)) {
                    // 遍历时顺带在标签上添加ID数据，方便后续点击跳转
                    let currentElement = contentChildrenList[i];
                    currentElement.setAttribute('id', "jumpId" + i);
                    // 获取标题内容，此内容为后续目录菜单展示的label
                    let name = currentElement.textContent;
                    let paramObj = {
                        id: i,
                        label: name,
                        children: [],
                        parentNode: {}
                    }
                    // 判断当前层级
                    header = header.replace('h', '')
                    const level = parseInt(header, 10);
                    if (lastLevel && level > lastLevel) {
                        preNodeObj.children.push(paramObj)
                        paramObj.parentNode = preNodeObj
                        preNodeObj = paramObj;
                    } else if (lastLevel && level < lastLevel) {
                        while (lastLevel >= level) {
                            // 往上找出对应的结点数组
                            if (lastLevel === 1) {
                                currentObjList = commonTreeList;
                                preNodeObj = {};
                            } else {
                                currentObjList = preNodeObj.parentNode.children;
                                preNodeObj = preNodeObj.parentNode;
                            }
                            lastLevel--;
                        }
                        currentObjList.push(paramObj)
                        paramObj.parentNode = preNodeObj
                        preNodeObj = paramObj;
                    } else if (lastLevel && level === lastLevel) {
                        preNodeObj.parentNode.children.push(paramObj)
                    } else {
                        currentObjList.push(paramObj)
                        paramObj.parentNode = preNodeObj
                        preNodeObj = paramObj;
                    }
                    lastLevel = level;
                }
            }
            return commonTreeList;
        },
        execStyle() {
            let style = "";
            if (this.propJson.height) {
                style += "height: " + this.propJson.height;
            }
            return style;
        }
    }
}
</script>

<style scoped lang="less">
.container {
    width: 100%;
    overflow: auto;
}


/* 自定义整个滚动条 */
.container::-webkit-scrollbar {
    width: 5px; /* 设置滚动条的宽度 */
}

/* 自定义滚动条轨道 */
.container::-webkit-scrollbar-track {
    background: #f1f1f1; /* 设置轨道的背景颜色 */
}

/* 自定义滚动条的滑块（thumb） */
.container::-webkit-scrollbar-thumb {
    background: #b7b7b7; /* 设置滑块的背景颜色 */
    border-radius: 20px;
}

/* 当滑块悬停或活动时的样式 */
.container::-webkit-scrollbar-thumb:hover {
    background: #a9a9a9; /* 设置滑块在悬停状态下的背景颜色 */
}
</style>